<template>
  <div>

    <table>
      <caption><strong>欢迎光临vue开发的收银系统水果店</strong></caption>
      <tr >
        <td>苹果 <i>{{ jin }}</i>￥/斤，折扣&lt; <i>{{zhe}}</i> 折 &gt;;</td>
      </tr>
      <tr>
        <td>请输入你要购买的斤数:<input type="number" value="" v-model="num"></td>
      </tr>
      <tr>
        <!-- 注册点击事件  -->
        <td><button @click="btn">结账买单</button></td>
      </tr>
      <tr>
        <td>结账单：总价：<span>{{ total }}</span>￥元折后价：<span>{{ dis }}</span>￥元 省了：<span>{{ sub }}</span>￥元</td>
      </tr>
    </table>

  </div>
</template>



<script>
export default {
  data(){
    return {
      jin:10,
      zhe:8,
      total: '',
      dis:'',
      sub:'',
      num:''
    }
   
  },
  methods:{
   btn(){
    this.total = this.num * this.jin,
    this.dis = this.total * this.zhe * 0.1
    this.sub = this.total - this.dis
   }
  }
}

</script>



<style lang="less">
body{
  table{
    color: black;
    width: 600px;
    height: 200px;
    margin: 100px auto;
    border: 3px solid purple;
    border-collapse: collapse;
    background-color: aqua;
    border-radius: 3px;
    caption{
      margin-bottom: 5px;
    }
    td{
      border: 2px solid black;
      text-align: center;
    }
   button{
    background-color: green;
    color:white;
    border:none;
    padding:5px;
    border-radius: 5px;
   }
  }
}
</style>